<template>
  <el-dialog v-el-drag-dialog title="关联属性" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose" destroy-on-close>
    <!-- 搜索区域 -->
    <el-card style="margin:0 0 5px 5px" v-show="showSearch">
      <el-form ref="queryForm" :inline="true" :model="queryData">
        <el-form-item prop="Q_attrName_S_LK">
          <el-input v-model="queryData.Q_attrName_S_LK" placeholder="属性名称" />
        </el-form-item>
        <el-form-item class="fr p-r-10">
          <el-button class="filter-item m-l-10" type="primary" round icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
          <el-button class="filter-item m-l-10" type="info" round icon="el-icon-refresh" @click="handleClear">
            清空
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- table区域 -->
    <el-card class="m-l-5">
      <el-row :gutter="10" class="m-b-5">
        <el-col :span="1.5">
          <el-button size="mini" plain type="primary" icon="el-icon-check" @click="handleConfirm()">
            确定
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" plain type="info" icon="el-icon-check" @click="handleClose()">
            取消
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" plain type="danger" icon="el-icon-refresh" @click="handleClearSelected()">
            清空已选
          </el-button>
        </el-col>
        <table-toolbar :showSearch.sync="showSearch" @refresh="getTableData" />
      </el-row>
      <el-table
        ref="rela_table"
        v-loading="tableLoading"
        :data="tableData"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        show-overflow-tooltip
        height="350px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="32" />
        <el-table-column align="center" label="属性名称" prop="attrName" sortable width="150" show-overflow-tooltip />
        <el-table-column prop="valueSelect" label="可选值">
          <template slot-scope="scope">
              <span v-for="(i,index) in scope.row.valueSelect.split(';')" :key="'tag_' + index">
                <el-tag v-if="index === 0" class="m-r-5">{{ scope.row.valueSelect.split(';')[0] }}</el-tag>
                <el-tag v-if="index === 1" class="m-r-5">{{ scope.row.valueSelect.split(';')[1] }}</el-tag>
                <el-tag v-if="index === 2" class="m-r-5">{{ scope.row.valueSelect.split(';')[2] }}</el-tag>
                <el-tag v-if="index === 3" class="m-r-5">{{ scope.row.valueSelect.split(';')[3] }}</el-tag>
              </span>
            <el-tooltip v-if="scope.row.valueSelect.split(';').length > 4" placement="top">
              <div slot="content">
                    <span v-for="(i,index) in scope.row.valueSelect.split(';')" :key="'content_' + index">
                      {{ i }}<br />
                    </span>
              </div>
              <el-tag v-if="scope.row.valueSelect.split(';').length > 4">{{ scope.row.valueSelect.split(';')[4] + ' ...' }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="tableQuery.total>0" :total="tableQuery.total" :page.sync="tableQuery.page" :limit.sync="tableQuery.limit" @pagination="getTableData(false)" />
    </el-card>
  </el-dialog>
</template>

<script>
export default {
  name: 'AttrTableDialog',
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    },
    url: {
      type: String,
      default: '/api/mall/attr/table'
    }
  },
  data() {
    return {
      visible: false,
      showSearch: true,
      queryData: {
        Q_attrName_S_LK: undefined,
        Q_attrType_S_EQ: '1'
      },
      tableLoading: false,
      tableData: [],
      tableQuery: {
        page: 1,
        limit: 20,
        total: 0,
        sort: undefined,
        order: undefined
      },
      selectionData: [],
      skipSelectionChange: false
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.getTableData(true)
        this.visible = true
      })
    },
    handleFilter() {
      this.tableQuery.page = 1
      this.getTableData(false)
    },
    handleClear() {
      this.$refs.queryForm.resetFields()
      this.getTableData(true)
    },
    getTableData(skipSelectionChane) {
      this.skipSelectionChange = skipSelectionChane
      const query = Object.assign(this.tableQuery, this.queryData)
      this.tableLoading = true
      this.$http.post(this.url, query).then(response => {
        this.tableData = response.param.data
        this.tableQuery.total = response.param.recordsTotal
        this.tableLoading = false
        this.skipSelectionChange = false
        this.$refs.rela_table.bodyWrapper.scrollTop = 0
      }).catch(e => {
        this.tableLoading = false
        this.skipSelectionChange = false
      })
    },
    sortChange(data) {
      const { prop, order } = data
      this.tableQuery.sort = prop
      if (order === 'ascending') {
        this.tableQuery.order = 'asc'
      } else {
        this.tableQuery.order = 'desc'
      }
      this.getTableData()
    },
    handleSelectionChange(selection) {
      if (!this.skipSelectionChange) {
        this.selectionData = this.selectionData.filter(data => {
          let result = false
          selection.forEach(row => {
            if (data.attrId === row.attrId) {
              result = false
            }
          })
          return result
        })
        this.selectionData = this.selectionData.concat(selection)
      }
    },
    handleConfirm() {
      this.$emit('confirmDialog', this.selectionData)
      this.onClose()
    },
    handleClearSelected() {
      this.skipSelectionChange = true
      this.$refs.rela_table.clearSelection()
      this.selectionData = []
      this.skipSelectionChange = false
    },
    handleClose() {
      this.handleClearSelected()
      this.onClose()
    },
    onClose() {
      this.$refs.queryForm.resetFields()
      this.handleClearSelected()
      this.visible = false
    }
  }
}
</script>
